<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>商品分享</title>

    <link href="__STATIC__/plugins/swiper/swiper.min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .swiper-container {
            width: 100%;
            height: 200px;
        }
        .names {
            width: 95%;
            margin: auto;
            margin-top: 10px;
            font-size: 15px;
            color: #000000;
        }
        .detail {
            color: #999;
            font-size: 10px;
            width: 95%;
            margin: auto;
            margin-top: 5px;
        }
        .price {
            width: 95%;
            margin: auto;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            height: 25px;
            line-height: 25px;
        }
        .price1 {
            font-size: 20px;
            color: #FF0000;
        }
        .price2 {
            font-size: 15px;
            color: #999;
        }
        .erwei {
            width: 95%;
            margin: auto;
            margin-top: 25px;
            display: flex;
            justify-content: space-between;
        }
        .erwei_d {
            width: 40%;
        }
        .erwei_d_1 {
            text-align: center;
            margin-bottom: 10px;
        }
        #erwei_d_2 {
            width: 100%;
        }
        #erwei_d_3 {
            width: 100%;
        }
    </style>
</head>

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        {foreach name="info.img_urls" item="bannerImg" key="bannerImgKey"}
            <div class="swiper-slide">
                <img src="{$bannerImg}" style="width: 100%;height: 100%;"/>
            </div>
        {/foreach}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<div class="names">{$info.name}</div>
<div class="detail">{$info.describe}</div>
<div class="price">
    <div class="price1">￥{$info.price / 100}</div>
    <div class="price2">{$info.spec}</div>
</div>
<div class="erwei">
    <div class="erwei_d">
        <div class="erwei_d_1">安卓二维码</div>
        <div id="erwei_d_2">
            <img src="__STATIC__/index/pages/image/android_code.png" style="width: 100%;height: 100%;"/>
        </div>
    </div>
    <!--<div class="erwei_d">
        <div class="erwei_d_1">苹果二维码</div>
        <div id="erwei_d_3">
            <img src="__STATIC__/index/pages/image/ios_code.jpg" style="width: 100%;height: 100%;"/>
        </div>
    </div>-->
</div>

<script type="text/javascript" src="__STATIC__/plugins/swiper/swiper.min.js"></script>
<script>
    var width = document.documentElement.clientWidth;
    console.log(width);
    var erweiwidth = width * 0.95 * 0.4;
    document.getElementById("erwei_d_2").style.height = erweiwidth + 'px';
    document.getElementById("erwei_d_3").style.height = erweiwidth + 'px';
    console.log(erweiwidth);
    console.log(document.getElementById("erwei_d_2").style.height);
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>
</body>
</html>


